<template>
    <view class="globe_back">
        <view class="p_32">
            <view v-if="coupon">
                <view>
                    <text :class="tabIndex === item.id ? 'active' : ''" :key="item.id" @click="setTab(item.id)" class="tabTitle" v-for="item in tabtitle">{{ item.name }}</text>
                </view>
                <view>
                    <view class="flex flex_wrap back_fff br_24 p_32 mt_32" v-for="(item,index) in coupon">
                        <view :class="item.type == 3 || item.type == 4 ? 'cl_666B75' : 'cl_FF6401'" style="width: 20%; margin-right: 2.5%; text-align: center">
                            <view class="f_24">
                                <text style="font-size: 52rpx">{{ item.coupon_price }}</text>
                                <!-- {{ item.text }} -->
                            </view>
                            <text class="f_24">{{ item.coupon_text }}</text>
                        </view>
                        <view style="width: 55%">
                            <text class="f_32 cl_00091A fw_bold list_title">{{ item.coupon_title }}</text>
                            <br />
                            <text class="f_24 cl_999CA3">有效期至{{ item.useageend_time }}</text>
                            <!-- <br /> -->
                            <!-- <text class="f_24 cl_999CA3">使用场景：{{ item.use }}</text> -->
                        </view>
                        <view class="mt_32" style="width: 20%; margin-left: 2.5%">
                            <text class="couponBtn back_FF6401 f_24" v-if="item.type == 2">可使用</text>
							<text class="couponBtn back_FF6401 f_24" v-if="item.type == 1" @click="lq(item.id)">点击领取</text>
                            <text class="couponBtn f_24" style="background: #666b75" v-if="item.type == 4">已失效</text>
							<text class="couponBtn f_24" style="background: #666b75" v-if="item.type == 3">已使用</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 空页面 -->
            <view v-else>
                <image class="typeImg" src="@/static/imgs/kong.png" mode="widthFix"></image>
                <text class="typeText cl_999CA3 f_28">还什么都没有哦</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            typeIndex: 0, //0有券,1没有券
            tabtitle: [
                { name: '可领取', id: 1 },
                { name: '可使用', id: 2 },
                { name: '已使用', id: 3 },
				{ name: '已失效', id: 4 }
            ],
            tabIndex: 1,
            list: [],
			page:1,
			pagesize:10,
			coupon:[],
        };
    },
    onLoad() {
        // this.getList();
		this.coupon_list(1)
    },
	onReachBottom() {
	
	  if (this.page * this.pagesize > this.coupon.length) return;
	  this.status = "loading";
	  this.page = ++this.page;
	  setTimeout(() => {
	    this.coupon_list(2);
	    if (this.page * this.pagesize > this.coupon.length)
	      this.status = "nomore";
	    else this.status = "loading";
	  }, 1000);
	},
    methods: {
        setTab(id) {
            this.tabIndex = id;
            // this.auditdata.status = id;
			this.page=1
            this.coupon_list(1);
        },
		lq(id){
			this.$.ajax(1,"POST","index/lq_coupon",{
				order_id:id
			},(res)=>{
					if(res.code==200){
						this.$.ti_shi(res.msg)
					
						setTimeout(() => {
						    this.coupon_list(1)
						}, 1000);
					}else{
						this.$.ti_shi(res.msg)
					}
			})
		},
		coupon_list(i){
			this.$.ajax(1,"POST","index/coupon_list",{
				page:this.page,
				pagesize:this.pagesize,
				type:this.tabIndex
			},(res)=>{
					if(res.code==200){
						if(i==1){
							 this.coupon=res.data
						}else{
							 this.coupon = [...this.coupon, ...res.data];
						}
						
					}else{
					   this.$.ti_shi(res.msg);
					}
			})
		},
        getList() {
            this.list = [
                {
                    number: '3',
                    text: '折',
                    condition: '无门槛使用',
                    title: '新人拖车优惠新人拖车优惠新人拖车优惠新人拖车优惠',
                    time: '2023-12-15',
                    use: '拖车',
                    type: '0'
                },
                {
                    number: '70',
                    text: '元',
                    condition: '满300使用',
                    title: '新人拖车优惠',
                    time: '2023-12-15',
                    use: '拖车',
                    type: '1'
                }
            ];
        }
    }
};
</script>

<style scoped lang="scss">
.tabTitle {
    margin-right: 48rpx;
    color: #999ca3;
}
.active {
    color: #3377ff;
    font-size: 32rpx;
    font-weight: bold;
}
.couponBtn {
    width: 128rpx;
    height: 56rpx;
    line-height: 56rpx;
    display: block;
    text-align: center;
    color: white;
    border-radius: 30rpx;
}
.list_title {
    display: inline-block;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl_666B75 {
    color: #666b75;
}
.typeImg {
    width: 400rpx;
    height: 320rpx;
    margin: 50% auto 20px;
    display: block;
}
.typeText {
    text-align: center;
    margin: 0 auto;
    display: block;
}
</style>
